<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${survey.title }</title>
<style type="text/css">
	.mui-inline{
		vertical-align: bottom;
		font-size: 14px;
		color: #8f8f94;
	}
	.mui-icon-star{
		color: #B5B5B5;
		font-size: 22px;
	}
	.mui-icon-star-filled{
		color: #FFB400;
		font-size: 22px;
	}
</style>
</head>
<script type="text/javascript" src="js/mui.min.js"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/sort/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/sort/draggable.js"></script>
<script type="text/javascript">
	/* $(document).ready(function(){
		var ua = navigator.userAgent;
		if(ua.indexOf('Android') < 0 || ua.indexOf('GIONEE') < 0 || ua.indexOf('RV') < 0){
			$('.non-gionee').show();
			$('.mui-content').remove();
			$('header').remove();
		}
	}); */
</script>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-pull-left"></a>
		<h1 class="mui-title">${survey.title }</h1>
		<input type="hidden" id="survey_id" value="${survey.id }" />
	</header>
	<div class="non-gionee" style="display: none;">
		请用金立手机自带浏览器打开
	</div>
	<div class="mui-content">
		<c:forEach var="question" items="${questions }" varStatus="i">
			<div>
			<h5 class="mui-content-padded" id="${question.id }">第${i.index + 1 }题:${question.questionTitle }</h5>
			<c:if test="${question.questionType == 'textTitle' }">
				<div class="mui-content">
					<div class="mui-content-padded" style="margin: 5px;">
						<input type="text" class="mui-input-clear" id="${i.index + 1 }" name="${question.id }" placeholder="请输入" />
					</div>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'radioTitle' }">
				<div class="mui-card">
					<form class="mui-input-group">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<div class="mui-input-row mui-radio mui-left">
									<label>${answer.answer }</label>
									<input name="${question.id }" type="radio" id="${i.index + 1 }" value="${answer.id }" />
								</div>
							</c:if>
						</c:forEach>
					</form>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'checkboxTitle' }">
				<div class="mui-card">
					<form class="mui-input-group">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<div class="mui-input-row mui-checkbox mui-left">
									<label>${answer.answer }</label> 
									<input name="checkbox1" value="${answer.id }" class="${question.id }"  id="${i.index + 1 }" type="checkbox" />
								</div>
							</c:if>
						</c:forEach>
					</form>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'scoreTitle' }">
				<div class="mui-content-padded">
					<c:forEach var="answer" items="${answers }" varStatus="j">
						<c:if test="${answer.questionId == question.id }">
							<div class="mui-inline">${answer.answer }</div>
							<div class="icons mui-inline" style="margin-left: 6px;">
								<i data-index="1" class="mui-icon mui-icon-star"></i>
								<i data-index="2" class="mui-icon mui-icon-star"></i>
								<i data-index="3" class="mui-icon mui-icon-star"></i>
								<i data-index="4" class="mui-icon mui-icon-star"></i>
								<i data-index="5" class="mui-icon mui-icon-star"></i>
								<input type="hidden" value="${answer.id }" id="answerId" />
								<input type="hidden" value="${question.id }" id="questionId" />
								<input type="hidden" value="${i.index + 1 }" id="index" />
							</div><br>
						</c:if>
					</c:forEach>
				</div>
			</c:if>
			<c:if test="${question.questionType == 'sortTitle' }">
				<div class="mui-card" style="margin-bottom: 35px;">
					<ul class="mui-table-view sortable">
						<c:forEach var="answer" items="${answers }" varStatus="j">
							<c:if test="${answer.questionId == question.id }">
								<li class="mui-table-view-cell">${answer.answer }</li>
							</c:if>
						</c:forEach>
					</ul>
				</div>
			</c:if>
			</div>
		</c:forEach>
		<div class="mui-content-padded" style="text-align: center;">
			<button type="button" class="mui-btn mui-btn-primary" data-loading-text = "提交中" data-loading-icon-position="right">确认</button>
		</div>
	</div>
</body>
<script type="text/javascript" charset="utf-8">
	mui.init({
	    swipeBack: true //启用右滑关闭功能
	});
	
	$(".sortable").sortable();
	
	//应用评分
	mui('.icons').on('tap','i',function(){
	  	var index = parseInt(this.getAttribute("data-index"));
	  	var parent = this.parentNode;
	  	var children = parent.children;
	  	if(this.classList.contains("mui-icon-star")){
	  		for(var i=0;i<index;i++){
 				children[i].classList.remove('mui-icon-star');
 				children[i].classList.add('mui-icon-star-filled');
	  		}
	  	}else{
	  		for (var i = index; i < 5; i++) {
	  			children[i].classList.add('mui-icon-star')
	  			children[i].classList.remove('mui-icon-star-filled')
	  		}
	  	}
	  	starIndex = index;
 	});
	
	var ua = navigator.userAgent;
	var uaArray = ua.split('/');
	var imei = uaArray[uaArray.length - 1];
	mui.toast(imei);
	
	mui(document.body).on('tap', '.mui-btn', function(e) {
		var survey_id = $('#survey_id').val();
	    // 获取数据
	    mui(this).button('loading');
	    var currentObj = this;
	    var obj = '';
	    var flag = false;	// 是否有未填标志（TRUE-->有）
	    $('input').each(function(){
	    	var str = '{';
	    	if (this.type == 'text') {
	    		if (this.value == null || this.value == '') {
	    			$(this).parent().parent().parent().css("color","#EC6C00");
	    			$('#' + this.name).css("color","#EC6C00");
	    			flag = true;
	    			return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.name).css("color","#8F8F94");
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.name + '", ';
				str += '"question_type":"text", ';
				str += '"answer":"' + this.value + '", ';
			} else if(this.type == 'radio'){
				if (!$("input[name='" + this.name + "']").is(':checked')) {
					$(this).parent().parent().parent().parent().css("color","#EC6C00");
					$('#' + this.name).css("color","#EC6C00");
					flag = true;
					return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.name).css("color","#8F8F94");
				}
				if(!$(this).is(':checked')){	// 未勾选
					return true;
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.name + '", ';
				str += '"question_type":"radio", ';
				str += '"answer":"' + this.value + '", ';
			} else if(this.type == 'checkbox'){
				if (!$("input[class='" + this.className + "']").is(':checked')) {
					$(this).parent().parent().parent().parent().css("color","#EC6C00");
					$('#' + this.className).css("color","#EC6C00");
					flag = true;
					return true;
				} else {
					$(this).parent().parent().parent().css("color","#000");
	    			$('#' + this.className).css("color","#8F8F94");
				}
				if(!$(this).is(':checked')){	// 未勾选
					return true;
				}
				str += '"survey_id":"' + survey_id + '", ';
				str += '"question_no":"' + this.id + '", ';
				str += '"question_id":"' + this.className + '", ';
				str += '"question_type":"checkbox", ';
				str += '"answer":"' + this.value + '", ';
			}
	    	str += '}';
	    	obj += str + ';';
	    });
	    // 评分
	    $('.icons').each(function(){
	    	var score = $(this).find('.mui-icon-star-filled').length;
	    	if(score == 0){
	    		$(this).parent().prev().css('color','#EC6C00');
	    		$(this).prev().css('color','#EC6C00');
	    		flag = true;
				return true;
	    	} else {
	    		// 判断是否当前题目下 所有的评分题都已经有评分
	    		var allFlag = true;
	    		$(this).parent().find('.icons').each(function(){
	    			if($(this).find('.mui-icon-star-filled').length == 0){
	    				allFlag = false;
	    			}
	    		});
	    		if (allFlag) {
					$(this).parent().prev().css("color","#8F8F94");
				}
	    		
				$(this).prev().css("color","#000");
			}
	    	var str = '{';
	    	str += '"survey_id":"' + survey_id + '", ';
			str += '"question_no":"' + $(this).find('#index').val() + '", ';
			str += '"question_id":"' + $(this).find('#questionId').val() + '", ';
			str += '"question_type":"score", ';
			str += '"answer":"' + $(this).find('#answerId').val() + '||' + score + '", ';
	    	str += '}';
	    	obj += str + ';';
	    });
	    obj = obj.substr(0, obj.length - 1);
	    if (flag) {
	    	mui.toast('请填写完整！');
	    	mui(currentObj).button('reset');
			return false;
		}
	    // ajax保存数据
	    $.ajax({
			type : "post",
			url : "feedback/saveFeedback",
			data: {
				imei: imei,
				obj: obj
			},
			dataType : 'json',
			async:false,
			success : function(data) {
				setTimeout(function() {
					mui(currentObj).button('reset');
					document.location.href = 'saved.jsp';
				},500);
			},
			error:function(){
				mui.toast('保存失败');
				mui(currentObj).button('reset');
			} 
		});
	});
</script>
</html>